<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <!-- 
      id:标识元素的唯一性
      width:画布的宽度
      height:画布的高度
    -->
   <canvas id="c1" width="600" height="600">
      当前浏览器不支持canvas，请下载最新版浏览器
      <a href="https://www.google.cn/chrome/?standalone=1&platform=win64">立即下载</a>
   </canvas>

   <script>
      // 1.找到画布
      const c1 = document.getElementById('c1')

      // 判断是否有getContext
      if (!c1.getContext) {
         console.log('当前浏览器不支持canvas，请下载最新版浏览器')
      }
      // 2.获取画笔，上下文对象
      const ctx = c1.getContext("2d")
      let index = 0
      function render() {
         ctx.clearRect(0, 0, 600, 600)
         index++
         if (index > 400) {
            index = 0
         }
         ctx.moveTo(200, 100)
         ctx.lineTo(300, 300)
         ctx.lineTo(400, 100)
         // 设置线条样式，线条宽度
         ctx.lineWidth = 1
         // 设置线条端点样式(butt|round|square)
         ctx.lineCap = "round"
         // 设置两个线段连接处的样式(mitter|round|bevel)
         ctx.lineJoin = "mitter"

         // 设置虚线
         ctx.setLineDash([40, 20])
         ctx.lineDashOffset = index

         ctx.stroke()
         requestAnimationFrame(render)
      }
      requestAnimationFrame(render)

   </script>
</body>

</html>